<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        人员修改
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

    <!--<style>
        .imgs{display: none;}
        .picture{display: none;}
    </style>-->

   
</head>
<body>

<div class="layui-card">
    <form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/OwnerServlet" id="modify-form" method="post" enctype="multipart/form-data">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
            </ul>

            <div class="layui-tab-content" >
                <div class="layui-tab-item layui-show">
                    <!--<form class="layui-form layui-form-pane" action="" id="add">-->
                    <input type="hidden" name="op" value="update">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>所属房间号
                        </label>
                         <div class="layui-input-block">
                            <input type="text" name="roomNo" autocomplete="off" placeholder="房间号码"
                             class="layui-input" lay-verify="required" lay-reqtext="房间号码是必填项，岂能为空？" value="">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>业主名称
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="ownerName" autocomplete="off" placeholder="输入成员名称"
                                   class="layui-input" lay-verify="required" lay-reqtext="成员名称是必填项，岂能为空？" value="">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>身份证号
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="ownerId" autocomplete="off" placeholder="请输入身份证号码"
                                   class="layui-input" maxlength="18" lay-verify="identity" value="">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>联系方式
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="ownerPhoneNumber" autocomplete="off" placeholder="请输入手机号"
                                   class="layui-input" maxlength="11" lay-verify="required|phone" value="">
                        </div>
                    </div>
                    
                     <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>入住时间
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="checkInTime" autocomplete="off" placeholder=""
                                   class="layui-input"   value="">
                        </div>
                    </div>
                    
                    
                   <div class="layui-form-item">
                        <label for="link" class="layui-form-label">
                            <span class="x-red">*</span>成员照片
                        </label>
                        <div class="layui-input-inline">
                            <div class="site-demo-upbar">
                                <div class=" layui-upload-button" style="border:#FFFFFF ;">
                                    <!--<form target="layui-upload-iframe" method="post" key="set-mine" enctype="multipart/form-data" action="">
                                        <input type="file" class="layui-upload-file"  id="previewImg" name="images" onchange="upload()">
                                    </form>
                                    <span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>-->
                                    <button type="button" class="layui-btn" id="test1">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                    <input class="layui-upload" type="file" accept="undefined" id="previewImg" name="ownerImage" >
                                </div>

                            </div>
                        </div>                     
                    </div>
 					<div class="layui-form-item imgs" id="imgshow">
                        <label  class="layui-form-label">成员照片展示
                        </label>

                        <img src="" id="pimages" name="pimages" style="width: 400px;height: 200px;"/>
                        
                    </div>
                    
                    
					<div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>业主密码
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="ownerPassword" autocomplete="off" placeholder="请输入密码"
                                   class="layui-input" lay-verify="required" lay-reqtext="成员名称是必填项，岂能为空？" value="">
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class='x-red'>*</span>房屋面积
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="ownerArea" autocomplete="off" placeholder="输入房屋面积"
                                   class="layui-input" lay-verify="required" lay-reqtext="成员名称是必填项，岂能为空？" value="">
                        </div>
                    </div>
                    

                    <div class="layui-form-item">
                        <button class="layui-btn" type="submit" lay-filter="add" lay-submit="">
                            保存修改
                        </button>
                    </div>
                    <!--</form>-->
                    <div style="height:100px;"></div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 引入jQuery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery.js"></script>
<!-- 引入jQuery-form -->
<script type="text/javascript" src="${pageContext.request.contextPath}/back/js/jquery-form.js"></script>

	<script type="text/javascript">
	/*获取请求路径上携带的商品编号*/
	let str = "${param.roomNo}";
	let roomNo = str.substring(0,3);
	
		$.getJSON("${pageContext.request.contextPath}/OwnerServlet",{op:"findById",roomNo:roomNo},function(result,statue,xhr){
			
			//获取信息填充到指定的DOM元素上
			let roomNo = result.data.roomNo;
			let ownerName = result.data.ownerName;
			let ownerId = result.data.ownerId;
			let ownerPhoneNumber = result.data.ownerPhoneNumber;
			let checkInTime = result.data.checkInTime;
			
			let ownerImage = result.data.ownerImage;
			let ownerPassword = result.data.ownerPassword;
			let roomArea = result.data.roomArea;
			
			$("input[name='roomNo']").val(roomNo);
			$("input[name='ownerName']").val(ownerName);
			$("input[name='ownerId']").val(ownerId);
			$("input[name='ownerPhoneNumber']").val(ownerPhoneNumber);
			$("input[name='ownerPassword']").val(ownerPassword);
			$("input[name='ownerArea']").val(roomArea);
			$("input[name='checkInTime']").val(checkInTime);
			
			//若有原图片则渲染
			//图片
			if(ownerImage !=null){
				$("#pimages").prop("src","${pageContext.request.contextPath}/FileDownloadServlet?type=image&fileName="+ownerImage);
				$("#previewImg").val(ownerImage);
			}
		});
		
		
	
	//商品图片预览功能
	$("input[name='ownerImage']").change(function(){
		//获取上传的文件
		let imageFile = this.files[0];
		//判断是否有文件
		if(imageFile != null){
			//构建读取流
			let fileReader = new FileReader();
			//读取文件
			fileReader.readAsDataURL(imageFile);
			//利用读取流对象加载文件
			fileReader.onload = function(){
				$("#pimages").prop("src",this.result);
			};
		}else{
			//为图片预览img元素设置src属性
			$("pimages").prop("src","");
		}
	});
	
	//对指定的表单绑定提交事件
	$("#modify-form").submit(function(){
		
		//表单提交之前应该对输入项进行校验，目前我们只是简单地做了必填属性require
		//.................
		
		//使用jQuery.form.js插件方法ajaxSubmit()异步提交表单
		$(this).ajaxSubmit(function(result){
			layui.use('layer',function () {
				if(result.status != 0){
					//!=0的时候说明添加商品成功
					layer.msg(result.message,{icon:1,time:1000});
					 //定时器
					 window.setTimeout(function(){
						 //关闭子窗口
			 			 var index = parent.layer.getFrameIndex(window.name);
			 			 parent.layer.close(index);
			 			 
			 			 //调用首页的查询方法
			 			 window.parent.owner_search_page();
					 },2000);
				}else{
					//添加商品出错
					layer.msg(result.message,{icon:5,time:5000});
				}
			});
		});
		//限制默认的表单提交
		return false;
	});
	
	
	
	
	
	
	
	
	
	
	
	
	

</script>
	
<script>
    layui.use(['laydate','element','layer','form','upload'], function(){
        var  $ = layui.jquery;//jquery
        var lement = layui.element;//面包导航
        var layer = layui.layer;//弹出层
        var form = layui.form;
        var upload = layui.upload;

        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //图片上传接口
        /*layui.upload({
          url: './upload.json' //上传接口
          ,success: function(res){ //上传成功后的回调
              console.log(res);
            $('#LAY_demo_upload').attr('src',res.url);
          }
        });*/
        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            ,url: 'https://httpbin.org/post' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                layer.msg('上传成功');
                console.log(res);
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
            var title=$("input[name='title']").val();
            //var content=$("textarea[name='content']").val();

            var article_category_id=$('#article_category_id option:selected') .val();//所属文章类型
            //alert(title);
            //var form=$("#cate_add").serialize();
            if(title==""){
                layer.msg('文章标题不能为空',{icon:5,time:2000});return false;
            }
            if(article_category_id==""){
                layer.msg('文章类型不能为空',{icon:5,time:2000});return false;
            }
            /*if(content){
                layer.msg("文章内容不能为空！",{icon:5,time:2000});return false;
          }*/
            var data = data.field;
            $.ajax({
                type:"post",
                url:"",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.info, {icon: 6,time:2000},function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                        return false;

                    }else{
                        layer.msg(data.info,{icon:5,time:2000});return false;
                    }
                }

            });

        });

    })
</script>
<!--栏目缩略图上传-->
<script>
    function upload(obj,id){
        var formData = new FormData();
        formData.append('images', $('#previewImg')[0].files[0]);
        formData.append('id', id);//将id追加再id中
        layer.msg('图片上传中', {icon: 16});
        $.ajax({
            type:"post",
            processData: false,
            contentType: false,
            url:"",
            data:formData,
            success:function(data){
                if(data.status == 1){
                    console.log(data.image_name);
                    layer.closeAll('loading');
                    //layer.msg(data.info,{icon:1,time:1000});
                    $("#pimages").attr('src',data.image_name);
                    $("#avatar").val(data.image_name);
                    $(".imgs").show();
                    return false;
                }else{
                    layer.msg(data.info,{icon:2,time:1000});
                }
            }
        });
    }
</script>

</body>
</html>